<div class="navigation">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            {% if articles.has_previous %}
                <li>
                    <a href="?page={{ articles.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            {% else %}
                <li><span aria-hidden="true" class="disabled">&laquo;</span></li>
            {% endif %}

            {% for pers in per_list %}
                {% if page == pers.numerator %}
                    <li class="active"><a href="?page={{ pers.numerator }}">{{ pers.numerator }}</a>
                    </li>
                {% else %}
                    <li><a href="?page={{ pers.numerator }}">{{ pers.numerator }}</a></li>
                {% endif %}
            {% endfor %}

            {% if articles.has_next %}
                <li>
                    <a href="?page={{ articles.next_page_number }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            {% else %}
                <li><span aria-hidden="true" class="disabled">&raquo;</span></li>
            {% endif %}
        </ul>
    </nav>
</div>
